/*
  学习目标：性能优化-原则
  1. 功能第一
  2. 优化第二

  优化手段：
    1. 减轻state的设计： 非渲染的数据，不放在state中
    2. 避免无效更新：shouldComponentUpdate - 返回true更新，返回false不更新

  钩子执行顺序
     ⬇️ shouldComponentUpdate - 不常用
     ⬇️ render
     ⬇️ componentDidUpdate
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: '我是msg',
  };
  componentDidMount() {
    // 1. 非渲染的数据，不放在state中
    // ❌this.setState({ obj: { name: 'zs', age: 20 } });
    // ✅直接写 this.xxx = ''
    this.obj = { name: 'zs', age: 20 };
    // console.log('this -----> ', this);
  }

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改msg
        </button>

        <Son count={this.state.count}></Son>
      </div>
    );
  }
}

class Son extends React.Component {
  // 2. 避免无效更新：shouldComponentUpdate
  // 返回true就更新，返回false就阻止更新

  // nextProps代表更新后的props对象，this.props代表更新前的props对象
  shouldComponentUpdate(nextProps) {
    console.log('shouldComponentUpdate -----> ', nextProps);
    console.log('this.props -----> ', this.props);
    if (this.props.count === nextProps.count) {
      // 数据没改变过，那就不需要更新
      return false;
    } else {
      // 数据改变，更新
      return true;
    }
  }
  componentDidUpdate() {
    console.log('Son组件更新了');
  }
  render() {
    return (
      <div>
        我是Son
        <GrandSon></GrandSon>
      </div>
    );
  }
}

class GrandSon extends React.Component {
  componentDidUpdate() {
    // console.log('GrandSon组件更新了');
  }
  render() {
    return <div></div>;
  }
}
